<template>
	<view>
		<view class="top"></view>
		<view class="content">
		<view class="data">完善资料</view>
		    <view class="remark">完善您的资料能够让您凸显个人能力，让大家更好地认识您！</view>
			<view>
				<image class="img" src="../../static/pages/photo.png"></image>
				<view class="img-text">请上传真实、正面、清晰的照片</view>
			</view>
			<view class="sex">
				<view class="sex-all">性别</view>
				<view class="classify">
					<view class="sexAll">
						<image class="nan" src="../../static/pages/nan.png"></image>
						<view class="classify-text">男生</view>
					</view>
					<view class="blank"></view>
					<view class="sexAll">
						<image class="nan" src="../../static/pages/nv.png"></image>
						<view class="classify-text">女生</view>
					</view>
				</view>
			</view>
			<view class="name">
				<view class="name-left">昵称</view>
				<view class="name-right">
					<view class="name-text">爱你遭了雷劈</view>
					<view class="blank1"></view>
				</view>
			</view>
			<view class="name">
				<view class="name-left">年龄</view>
				<view class="name-right">
					<view class="age-text">请选择</view>
					<view class="blank1"></view>
				</view>
			</view>
			<view class="hint">性别选定后不可更改,请谨慎操作</view>
			<view class="save"><span class="save-text">保存</span></view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.top{
		width: 100%;
		height: 90rpx;
		background: black;
	}
	.content{
		margin: 230rpx 0rpx 0rpx 106rpx;
	}
	.data{
		font-size: 40rpx;
		font-family: PingFang SC;
		
		color: #2B2937;
		line-height: 27rpx;
	}
	.remark{
		width: 550rpx;
		margin-top: 46rpx;
		font-size: 23rpx;
		font-family: PingFang SC;
		
		color: #5D5D5D;
		line-height: 27rpx;
	}
	.img{
		width: 135rpx;
		height: 135rpx;
		margin: 80rpx 0rpx 0rpx 220rpx;
	}
	.img-text{
		margin: 20rpx 0rpx 0rpx 110rpx;
		
		font-size: 23rpx;
		font-family: PingFang SC;
		
		color: #5D5D5D;
		line-height: 27rpx;
	}
	.sex{
		display: flex;
		flex-wrap: wrap;
		margin-top: 35rpx;
	}
	.sex-all{
		margin-top: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		
		color: #1A1A1A;
		line-height: 27rpx;
	}
	.classify{
		display: flex;
		flex-wrap: wrap;
		width: 415rpx;
		height: 82rpx;
		background: #F6F7F9;
		border-radius: 38rpx;
		margin-left: 30rpx;
	}
	.sexAll{
		display: flex;
		flex-wrap: wrap;
		margin: 25rpx 0rpx 0rpx 60rpx;
	}
	.nan{
		width: 30rpx;
		height: 30rpx;
	}
	.classify-text{
		font-size: 23rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #C5C6CB;
		line-height: 27rpx;
		margin-left: 10rpx;
	}
	.blank{
		width: 2rpx;
		height: 60rpx;
		background: #c5C6Cb;
		margin: 10rpx 0rpx 0rpx 70rpx;
	}
	.name{
		margin-top: 60rpx;
		display: flex;
		flex-wrap: wrap;
	}
	.name-left{
		
		font-size: 28rpx;
		font-family: PingFang SC;
		
		color: #1A1A1A;
		line-height: 27rpx;
	}
	.name-right{
		margin-left:70rpx ;
	}
	.name-text{
		margin:0rpx 0rpx 25rpx 17rpx;
		font-size: 23rpx;
		font-family: PingFang SC;
		
		color: #1A1A1A;
		line-height: 27rpx;
	}
	.blank1{
		width: 397rpx;
		height: 2rpx;
		background: #EEEEEE;
	}
	.age-text{
		
		font-size: 25rpx;
		font-family: PingFang SC;
		
		color: #D1CFDD;
		line-height: 27rpx;
	}
	.hint{
		margin-top: 40rpx;
		font-size: 23rpx;
		font-family: PingFang SC;
		
		color: #FF0844;
		line-height: 27rpx;
	}
	.save{
		margin-top: 130rpx;
		width: 544rpx;
		height: 104rpx;
		background: #D1CFDD;
		box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 52rpx;
	}
	.save-text{
		margin: 37rpx 0rpx 0rpx 240rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 27rpx;
		display:inline-block;
	}
</style>
